<template>
    <div>
      <div class="header">
        <div class="nav main">
          <ul class="headerLeft">
            <li>小米商城</li>
            <li>MUI</li>
            <li>loT</li>
            <li>云服务</li>
            <li>金融</li>
            <li>有品</li>
            <li>小爱开放平台</li>
          </ul>
          <div class="headerRight">
            <div>登录</div>
            <div class="shop">
              <div class="shopImg">
                <img src="../../public/imgs/icon-cart-checked.png" alt="">
              </div>
              <div>购物车</div>
            </div>
          </div>
        </div>
      </div>
      <div class="logoBox">
        <div class="logo main">
            <img src="../../public/imgs/mi-logo.png" alt="">
        </div>
        <div class="navList">
            <ul>
                <li><span id="TV" @mouseenter="over(this)" @mouseleave="out(this)"> 电视</span></li>
                <li><span id="phone" @mouseenter="overP(this)" @mouseleave="outP(this)"> 小米手机</span></li>
                <li>RedMi红米</li>
                <li>笔记本</li>
                <li>路由器</li>
                <li>家电</li>
            </ul>
        </div>
        <div class="searchBox">
            <div>
                <input type="text">
            </div>
            <div class="searchImg">
                <img src="../../public/imgs/icon-search.png" alt="">
            </div>
        </div>  
       </div>
       <div id="hiddenTv" style="display:none" >
        <div class="TV">
   <ul>
       <li>
           <img src="../../public/imgs/nav-img/nav-3-1.jpg" alt="">
           <div class="text">小米壁画电视 65英寸</div>
           <div class="price">6999</div>
       </li>
       <li>
           <img src="../../public/imgs/nav-img/nav-3-2.jpg" alt="">
           <div class="text">小米全面屏电视 65英寸</div>
           <div class="price">6999</div>
       </li>
       <li>
           <img src="../../public/imgs/nav-img/nav-3-3.png" alt="">
           <div class="text">小米电视4A 32英寸</div>
           <div class="price">799</div>
       </li>
       <li>
           <img src="../../public/imgs/nav-img/nav-3-4.jpg" alt="">
           <div class="text">小米电视4A 55英寸</div>
           <div class="price">1299</div>
       </li>
       <li>
           <img src="../../public/imgs/nav-img/nav-3-5.jpg" alt="">
           <div class="text">小米电视4A 65英寸</div>
           <div class="price">2799</div>
       </li>
       <li>
           <img class="special" src="../../public/imgs/nav-img/nav-3-6.png" alt="">
           <div class="text">RedMi红米电视 70英寸 R70A</div>
           <div class="price">3499</div>
       </li>
   </ul>
 </div>
       </div>
    </div>
</template>
<script>
import data from "../../public/json/nav.json"
console.log()
export default {
  name: 'Detail',
  data:{
    phoneDate:[]
  },
  methods:{
    over() {
    let  hiddenTv = document.getElementById('hiddenTv');
    let  TV = document.getElementById('TV');
    hiddenTv.style.display = "block";
    TV.style.color = "orange";
    },
    out() {
     let hiddenTv = document.getElementById('hiddenTv');
     let  TV = document.getElementById('TV');
     TV.style.color = "black";
     hiddenTv.style.display = "none";
   },
   overP() {
    let  phone = document.getElementById('phone');
    phone.style.color = "orange";
 },
 outP() {
    let  phone = document.getElementById('phone');
    phone.style.color = "black";
}
   
  },
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  
  }
    .main{
      margin-left: 10px;
    }
    .header{
      line-height: 50px;
      background: rgb(51, 51, 51);
    }
    .nav{
      display: flex;
      justify-content: space-between;
    }
    .headerLeft{
      display: flex;
      align-items: center;
    }
    .headerLeft li{
      list-style: none;
      margin-right: 20px;
      color: rgb(172, 172, 172);
    }
    .headerRight{
      color: rgb(172, 172, 172);
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-right: 10px;
    }
    .shop{
      padding: 0 40px;
      background: rgb(255, 101, 1);
      margin-left: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
    }
    .shopImg{
      width: 36px;
      height: 36px;
    }
    .logoBox{
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo{
        width: 60px;
        height: 60px;
        background: rgb(251, 103, 0);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .navList ul {
        list-style: none;
        display: flex;
    }
    .navList ul li{
        margin-right: 10px;
        font-size: 20px;
    }
    .searchBox{
        margin-right: 10px;
        display: flex;
    }
    .searchBox  input{
        line-height: 40px;
        width: 300px;
    }
    .searchImg{
        border: 1px solid lightgray;
        border-left: none;
    }
    .searchImg img{
        width: 20px;
        height: 20px;
        padding: 10px 20px;
    }
    .TV {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
    .TV ul{
        display: flex;
        list-style: none;
        align-items: center;
    }
    .TV ul li{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .TV ul li img{
        width: 260px;
        padding: 0 20px;
        border-right: 1px solid lightgray ;
    }
    .TV ul li .special{
        border: none;
    }
    .text{
        margin-top: 20px;
    }
    .price{
        margin-top: 5px;
        color: rgb(230, 136, 58);
    }
    #TVButton:hover .TV{
        display: block;
    }
  </style>